<template>
  <div>
    <h1 class="alert-warning">index</h1>

    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <ul class="nav nav-tabs">
            <li role="presentation">
              <!-- 点击的时候,路由跳转的页面设置 -->
              <!-- to的属性值要根据router/index.js 里面配置的path来填写 -->
              <router-link to="/hello">hello</router-link>
            </li>
            <li role="presentation">
              <router-link to="/">index</router-link>
            </li>
            <li role="presentation">
              <router-link to="/world">world</router-link>
            </li>
            <li role="presentation">
              <router-link to="/showImg">showImg</router-link>
            </li>
            <li role="presentation">
              <!-- 通过调用函数进行路由的跳转 -->
              <button type="button" @click="fun1()">点我</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Index",
    methods: {
      /* 关键字不要使用,记得写上方法名 $$router中间没有. */
      fun1: function () {
        /* 程序式的操作 */
        this.$router.push("/showImg");
      }
    }
  }
</script>

<style scoped>

</style>
